<template>
  <div>
    <div class="banner linear-bg-blue">
      <div class="amount-block">
        <!-- <h1 class="small-title">成交金额</h1> -->
        <!-- <span class="big-amount">{{count.amount}}</span> -->
        <h1 class="small-title">订单金额</h1>
        <span class="big-amount">{{saleAmountSum}}</span>
      </div>
      <navigator
        href="/pages/home/data-analyze/main"
        class="quick-link"
        hover-class="none"
      >
        <div v-for="(item,idx) in list1" :key="idx" class="count-block">
          <h1 class="title">{{item.name}}</h1>
          <span class="value">{{count[item.key]}}</span>
        </div>
      </navigator>
    </div>
    <div class="quick-wrap">
      <p
        v-for="(item,idx) in list2"
        :key="idx"
        class="link"
        hover-class="none"
        @click="linkClick(item)"
      >
        <img v-if="item.show" :src="item.img" mode="widthFix" class="fake" />
      </p>
    </div>
    <!-- <button @click="test">test</button> -->
  </div>
</template>

<script>
// import { formatNumber2 } from '@/utils'
import { dateFormatter } from '@/utils'

import {
  SHOP_COLLECTION_COUNT,
  FIND_SHOP_ORDER_PAGE,
  FIND_CUSTOMER_PAGE_API,
  SHOP_SALES_COUNT,
  FIND_BY_SHOPID_PAGEAPI,
  FIND_SHOP_BASE_INFO
} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      saleAmountSum: '',
      countForm: {
        amount: 0,
        collect: 0,
        orderTotal: 0,
        memberTotal: 0
      },
      list1: [
        { name: '订单数', key: 'orderTotal' },
        { name: '收藏数', key: 'collect' },
        { name: '会员数', key: 'memberTotal' }
      ],
      list2: [
        {
          // img: '/static/assets/img/sy_qfx.png',
          link: '/pages/home/share/main',
          show: true
        },
        {
          // img: '/static/assets/img/sy_yhq.png',
          link: '/pages/shop-management/coupon-list/main',
          show: true
        },
        {
          // img: '/static/assets/img/sy_pt.png',
          link: '/pages/home/group/index/main',
          show: false
        }
        // { img: '/static/assets/img/sy_pt.png', link: '/pages/home/community/main' }, // 社区
      ],
      shopIdentity: ''
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    count () {
      let obj = { ...this.countForm }
      obj.amount = this.account.totalIncome
      return obj
    }
  },
  onShareAppMessage () {
    return {
      title: '开店宝',
      // path: '/pages/login/index/main',
      path: '/pages/login/login/main',
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      }
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.getShopIdentityParams()
    this.initPage()
  },
  methods: {
    test () {
      wx.navigateToMiniProgram({
        appId: 'wxc5eef9244e1d68a8',
        path: 'pages/apply/main?id=123',
        extraData: {
          foo: 'bar'
        },
        // develop（开发版），trial（体验版），release（正式版）
        envVersion: 'trial',
        success (res) {
          // 打开成功
          console.log(res)
        }
      })
    },
    initPage () {
      this.shopSaleAmountCount()
      // this.shopMemberCount()
      this.shopCollectionCount()
      this.shopOrderCount()
      this._getVIPNumPeople()
      this._getShopMoney()
      this._findTool()
    },

    shopSaleAmountCount () {
      this.countForm.amount = Math.floor(Math.random() * 10000)
    },
    shopMemberCount () {
      // this.countForm.memberTotal = Math.floor(Math.random() * 100) + '(fake)'
      this.countForm.memberTotal = 0
    },
    shopCollectionCount () {
      const vm = this

      SHOP_COLLECTION_COUNT(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.countForm.collect = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    shopOrderCount () {
      const vm = this

      let params = {
        shopId: vm.account.shopId,
        state: '3,7'
      }

      FIND_SHOP_ORDER_PAGE(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            vm.countForm.orderTotal = r.data.data.total
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    _getVIPNumPeople () {
      const vm = this
      let params = {
        shopId: vm.account.shopId
      }
      FIND_CUSTOMER_PAGE_API(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            vm.countForm.memberTotal = r.data.data.total
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    _getShopMoney () {
      const vm = this

      let params = {
        shopId: vm.account.shopId,
        orderDateStart: '1970-01-01 00:00:00',
        orderDateEnd: dateFormatter('yyyy-MM-dd 23:59:59', new Date()),
        // state: '3'
        state: '0'
      }
      SHOP_SALES_COUNT(params)
        .then(r => {
          if (r.data.code === '0') {
            let arr = r.data.data
            let val = arr.reduce((acc, _) => {
              if (_.state === '3' || _.state === '7') {
                acc += _.saleAmount
              }
              return acc
            }, 0)
            vm.saleAmountSum = val.toFixed(2)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    _findTool () {
      const vm = this
      vm.list2[2].show = false
      if (!vm.$cookie.get('isGroup')) {
        FIND_BY_SHOPID_PAGEAPI(vm.account.shopId, 1, 99)
          .then(r => {
            if (r.data.code === '0') {
              let list = r.data.data.list
              for (let i = 0; i < list.length; i++) {
                if (list[i].marketingType === 'GROUP') {
                  this.list2[2].show = true
                  vm.$cookie.set('isGroup', true)
                  return
                }
              }
            } else {
              vm.$toast(r.data.message)
            }
          })
          .catch(e => {
            console.info(e)
          })
      } else {
        this.list2[2].show = true
      }
    },
    getShopIdentityParams () {
      const vm = this
      FIND_SHOP_BASE_INFO(vm.account.shopId).then(r => {
        if (r.data.code === '0') {
          vm.shopIdentity = r.data.data.shopIdentity
          console.log(vm.shopIdentity)
        } else {
          vm.$toast(r.data.message)
        }
      })
    },
    linkClick (item) {
      const vm = this
      if (vm.shopIdentity === 'PERSONAL') {
        vm.$toast('请先开通实业宝')
      } else {
        vm.$router.push(`${item.link}`)
      }
    } // 创业宝不能使用营销工具
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.banner {
  padding: 15px 0;
  box-shadow: 0 3px 5px $light-black;
  > .amount-block {
    text-align: center;
    margin: 30px 0 15px;
    > .small-title {
      font-size: 12px;
    }
    > .big-amount {
      font-size: 30px;
    }
  }
  > .quick-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > .count-block {
      width: 33%;
      text-align: center;
      &:not(:last-child) {
        border-right: 1px solid $light-white;
      }
      > .title {
        font-size: 12px;
      }
      > .value {
        font-size: 16px;
      }
    }
  }
}
.quick-wrap {
  padding: 15px;
  > .link {
    width: 100%;
    > .fake {
      width: 100%;
    }
  }
}
</style>
